<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>爱计时平台</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: 55%;
			}
		</style>
	</head>

	<body>
	
		<style>
			* {
			    touch-action: pan-y;
			}
			body{
				background-color: #FFFFFF;
			}
			.mui-control-content {
				background-color: white;
				min-height: 50rem;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 100%;
				max-width: 130px;
			}
			.mui-bar-nav{
				position: absolute;
					background: url(images/my-top.png) no-repeat;
					height:40%;
					background-size: 100% 100%;
					    -webkit-background-size: 100% 100%;
			
			}
			
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-return img{
					     width: 75%;						
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
			}
			
			.top-logo {
			position: absolute;
			    width: 10%;
				left: 28%;
				top: 0.1875rem;			
					}
					.top-logo img{
					    width: 90%;					
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;			
					}
					.top-menu img{
						 width: 75%;						
							}
							.mui-bar-tab .mui-tab-item.mui-active{
								color: #ea4609;
							}
					/* 公共部分end */
					.top-content{
						    height: 3rem;
						    background: #ea4609;
						    width: 110%;
						    margin-left: -3%;
					}
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}		
			.mui-bar .mui-btn{
				    position: absolute;
				    top: 0;
				    right: -10px;
				    border: 0;
					background-color: #e94709;
					color: #FFFFFF;
				    font-size: 10px;
				    border-radius: 40px;
			}
			.mui-bar-nav{
				    top: 0;
				    -webkit-box-shadow: 0 1px 6px #fff;
				    box-shadow: 0 1px 6px #fff;
			}
			.qian-calendar {
				    position: absolute;
					width: 80%;
					height: 120%;
					top: 60%;
					margin: 0 10%;
					background-color: #fff;
					border-radius: 15px;
					box-shadow: 1px 1px 20px #ededed;
						
			}
/* 		.my-href .mui-table-view .mui-table-view-cell{
					float: left;
					width: 32%;
					
				}
			.mui-table-view:before, .mui-table-view::after{
					height: 0;
				}
				.my-href .mui-table-view .mui-table-view-cell img{
					max-width: 100%;
					width: 100%;
				}
			.my-href .mui-table-view .mui-table-view-cell span{
				font-size: 14px;
				color: #666666;
			}
			.my-href .mui-table-view{
				margin-left: 5%;
			} */
			.mui-bar-nav~.mui-content{
				padding-top:20% ;
				background-color: #FFFFFF;
			}
			.mui-content .mui-icon{
				padding: 2px;
				border-radius: 15px;
				background-color: #E94709;	
				color: #FFFFFF;
				font-size: 15px;
				margin-right: 3px;
			}
			.qian-day{
				    position: absolute;
				    top: 20%;	
					overflow: hidden;
				    padding: 0 22%;
				    padding-top: 6%;
				    font-size: 15px;
				    color: #fff;
				    line-height: 30px;
			}
			.qian-day span{
				float: left;
			}
			.qian-day div{
				width: 30px;
				height: 30px;
				background: url(images/qian.png) no-repeat;
				background-size: 100% 100%;
				    -webkit-background-size: 100% 100%;
				margin: 0 5px;
				float: left;
				text-align: center;
				color: #ffab00;
				font-size: 25px;
			}
			.qian-day .qian-tips{
				color: #FFFFFF;
				
			}
			.qian-day .qian-tips span{
				float: unset;
			}
			.calendar-week{
				border-top: 2px solid #a4a4a4;
				width:80%;
				margin: 0 10%;
				height:45px;
			}
			.calendar-week div{
				float:left; 
				width:14.28%; 
				height:45px; 
				color:#4a4a4a; 
				text-align:center; 
				line-height:45px; 
				cursor:pointer;
			}
			.calendar-content{
				width:80%;
				margin: 0 10%;
			}
			.calendar-content div{
				float:left; 
				width:14.28%; 
				height: 30px;
				padding: 5px;
				color:#4a4a4a; 
				text-align:center; 
				cursor:pointer;
			}
			.calendar-content .canChoose{
				
			}
			.calendar-content .canChoose:hover{
				color: #fff;
				background-color:#09F;
			}
			.calendar-content div.today{
				color:#09F;
			}
			.calendar-content div.qian{
				color: #ffffff;
				background-color: #E94709;
				border-radius: 20px;
			}
			#calendar-ym{
				margin: 5% 0;
				text-align: center;
				font-size: 20px;
				font-weight: 500;
			}
			.tomorrow-tips{
				
				    position: absolute;
				    bottom: 0;
				    width: 100%;
					height: 3rem;
				    border-radius: 2px;
				    background-color: #dcdcdc;
				    font-size: 10px;
				    text-align: center;
				    line-height: 50px;
				    color: #595757;
					border-bottom-right-radius: 10px 10px;
					border-bottom-left-radius: 10px 10px;

			}
			.mui-switch .mui-switch-handle{
				width: 20px;
				height: 20px;
			}
			.mui-switch-mini{
				margin-right: 55px;
				margin-top: 13px;
				width: 37px;
				height: 23px;
			}
			.mui-switch.mui-active{
				background-color: #E94709;
				border-color: #E94709;
			}
			#qiandao{
				position: absolute;
				top: 184%;
				width: 35%;
				text-align: center;
				background: #E94709;
				padding: 2% 0;
				margin: 0 33%;
				border-radius: 30px;
				color: #ffffff;
			}
			.qian-bottom{
				position: absolute;
				bottom: 0;
				height: 20%;
				width: 100%;
				background-color: #FFFF00;
			}
			.mui-table-view:before, .mui-table-view::after, .mui-table-view-cell:after{
				height: 0;
			}
			.qian-bottom .mui-table-view{
				width: 100%;

			}
			.qian-bottom .mui-table-view .mui-table-view-cell{
				width: 32%;
				height: 7rem;
				float: left;
			}
			.qian-bottom .mui-table-view .mui-table-view-cell img{
				width: 115%;
				
			}
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
					<a class="top-return mui-action-back"><img src="images/return.png" ></a>
					<a class="top-logo"><img src="images/logo.png" ></a>
					<h1 class="mui-title">	
							Aitimt 爱计时</h1>
					<a href="#popover" id="openPopover" class="top-menu" ><img src="images/menu.png" ></a>
					<div id="popover" class="mui-popover">
					  <ul class="mui-table-view">
					    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
					    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
					    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
					    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
					    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
					  </ul>
			</div>
			<div class="qian-day">
				<span>已坚持</span>
				<div>0</div>
				<div>0</div>
				<div>1</div>
				<span>天签到</span>
				<a type="button" class="mui-btn" href="#" >签到规则</a>
				<p class="qian-tips">连签一周有机会领取<span class="mui-icon iconfont icon-jifen"></span>50积分</p>
			</div>
			<div id="qian-calendar" class="qian-calendar">
					<div id="calendar-ym"></div>
					<div class="calendar-week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>
					<div id="calendar-content" class="calendar-content clearfix"></div>
					<div class="tomorrow-tips">
							不想漏签? 开启明日签到提醒
						<div class="mui-switch mui-switch-mini" style="float: right;">
							<div class="mui-switch-handle"></div>
						</div>
					</div>				
			</div>
			<div id="qiandao">
				马上签到
			</div>
		</header>
		<!-- 公共头部end -->
		<div class="qian-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<img class="mui-media-object mui-pull-left" src="images/nophoto.png">							
				</li>
				<li class="mui-table-view-cell mui-media">
					<img class="mui-media-object mui-pull-left" src="images/nophoto.png">				
				</li>
				<li class="mui-table-view-cell mui-media">
					<img class="mui-media-object mui-pull-left" src="images/nophoto.png">						
				</li>
				
			</ul>	
		</div>
	
		<!-- 公共底部start -->
		
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
			var cldbox=document.getElementById("qian-calendar");
			var oym = document.getElementById("calendar-ym");
			var content = document.getElementById("calendar-content");
			var qiandao = document.getElementById("qiandao");
			
			// 时间对象(默认当前)
			
			var	dateObj = new Date();
		
			// 年月获取 
			var year = getYear(dateObj);
			var month = getMonth(dateObj);
			
			// 月年的显示
			oym.innerHTML = year+'/'+month;
			// 获取本月1号的周值
			var fistWeek = getCurmonWeeknum(dateObj);
			// 本月总日数
			var monDaynum = getCurmonDaynum(dateObj);
			// 当前日期
			var nowDay = getDay(dateObj);
			//初始化显示本月信息
			setContent(content, fistWeek, monDaynum, nowDay);
			
			var isSupportMUI = (typeof mui === 'function');
			var evt = {
				type: isSupportMUI?'tap':'click'
			}
			//签到事件
			qiandao.onclick = function(){
			         mui.alert('签到成功');
			         document.getElementById('today').classList.add("qian");
			        }
			
			// 显示当前时间
			content.addEventListener(evt.type,function (event) {
			    if(event.target.tagName.toLowerCase()=="div" && event.target.nodeType=="1" && hasclass(event.target.className,"canChoose")){
					var day = event.target.innerHTML;
					dateObj = new Date(getYear(dateObj), getMonth(dateObj)-1, day);
					var week = getWeek(dateObj);	
					console.log({
						'year': getYear(dateObj),
						'month':  getMonth(dateObj),
						'day': day,
						'week': week
					});
				}; 
			})
			//有无指定类名的判断
			function hasclass(str,cla){
			  	var i=str.search(cla);
			  	if(i==-1){
			   		return false;
			  	}else{
			   		return true;
			  	};
			}
			
			// 初始化日期显示方法
			function setContent(el, fistWeek, monDaynum, nowDay){
				// 留空
				for(var i=1;i <= fistWeek;i++){
					var subContent = document.createElement("div");
					subContent.innerHTML = "";
					el.appendChild(subContent);
				}
				//签到了的天数数组
				var qianday=['1','2','3','4'];
				function isInArray(arr, str) {
				    var testStr = ',' + arr.join(",") + ",";
				    return testStr.indexOf("," + str + ",") != -1 ;
				}
				// 正常区域				
				for(var i=1;i <= monDaynum;i++){
					var subContent = document.createElement("div");
					subContent.className="canChoose";
					if(i==nowDay){     
						subContent.setAttribute("id","today");
						subContent.classList.add("today");
					}
					if(isInArray(qianday,i)){
						subContent.classList.add("qian");
					}
					if(i<10){
					subContent.innerHTML = '0'+i;	
					}else{
					subContent.innerHTML = i;	
					}
					el.appendChild(subContent);
				}
			}
			
			// 清除内容
			function clearContent(el){
				el.innerHTML="";
			}
			// 判断闰年
				function isLeapYear(year){ 
					if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
						return true;
					}else{
						return false;
					}
				}
				
				// 得到当前年份
				function getYear(dateObj) {
					return dateObj.getFullYear()
				}
				
				// 得到当前月份
				function getMonth(dateObj) { 
					var month=dateObj.getMonth()
					switch(month) { 
						case 0: return "1"; break; 
					  	case 1: return "2"; break; 
					  	case 2: return "3"; break; 
					  	case 3: return "4"; break; 
					  	case 4: return "5"; break; 
					  	case 5: return "6"; break; 
					  	case 6: return "7"; break; 
					  	case 7: return "8"; break; 
					  	case 8: return "9"; break; 
					  	case 9: return "10"; break; 
					  	case 10: return "11"; break; 
					  	case 11: return "12"; break;   
					  	default: 
					}
				}
				
				// 得到当前号数
				function getDay (dateObj) {
					return dateObj.getDate();
				}
				
				// 得到周期数
				function getWeek (dateObj) {
					var week;
					switch (dateObj.getDay()){
					 	case 1: week = "星期一"; break;
					 	case 2: week = "星期二"; break;
					 	case 3: week = "星期三"; break;
					 	case 4: week = "星期四"; break;
					 	case 5: week = "星期五"; break;
					 	case 6: week = "星期六"; break;
					 	default: week = "星期天";
					}
					return week;
				}
				
				// 获取本月总日数方法
				//修改后做了判断，如果传入fullyear 和 curMonth 参数，就可以查询任意年份任一月份有多少天，用于处理31号的问题
				function getCurmonDaynum(dateObj,fullyear,curMonth) {
					var year = fullyear?fullyear:dateObj.getFullYear();
					var month = curMonth?curMonth:dateObj.getMonth();
					if(isLeapYear(year)){//闰年
						switch(month) { 
							case 0: return "31"; break; 
							case 1: return "29"; break; //2月
							case 2: return "31"; break; 
						   	case 3: return "30"; break; 
						   	case 4: return "31"; break; 
						   	case 5: return "30"; break; 
						   	case 6: return "31"; break; 
						   	case 7: return "31"; break; 
						   	case 8: return "30"; break; 
						   	case 9: return "31"; break; 
						   	case 10: return "30"; break; 
						   	case 11: return "31"; break;   
							default:  
						}
					}else{//平年
				   		switch(month) { 
				   			case 0: return "31"; break; 
				   			case 1: return "28"; break; //2月 
				   			case 2: return "31"; break; 
						   	case 3: return "30"; break; 
						   	case 4: return "31"; break; 
						   	case 5: return "30"; break; 
						   	case 6: return "31"; break; 
						   	case 7: return "31"; break; 
						   	case 8: return "30"; break; 
						   	case 9: return "31"; break; 
						   	case 10: return "30"; break; 
						   	case 11: return "31"; break;   
				   			default:  
						}   
					}
				}
				
				// 获取本月1号的周值
				function getCurmonWeeknum(dateObj) {
					var oneyear = new Date();
					var year = dateObj.getFullYear();
					var month = dateObj.getMonth(); //0是12月
					oneyear.setFullYear(year);
					//先设置1号，再改变月份，避免31号的问题
					oneyear.setDate(1);
					oneyear.setMonth(month); //0是12月
					return oneyear.getDay();
				}
			
		</script>
	
	</body>
	
</html>
